<!-- eslint-disable vue/valid-v-bind -->
<template>
  <el-container>
     <el-main>
      <div class="topTip" v-if="listGain.subjectID">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subjectName }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
        <hr>
      </div>
    <el-row>
      <el-col :span="12" class="left">
            <span>目录名称 </span>
          <el-input placeholder="请输入目录名称" v-model.trim="listGain.directoryName">
           </el-input>
        <span>状态 </span>
        <el-select  placeholder="请选择" v-model="listGain.state" class="selectTop">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
      </el-select>
        <el-button size="medium" @click="clear">清除</el-button>
        <el-button type="primary" size="medium"  @click="search">搜索</el-button>
      </el-col>
      <el-col :span="12">
        <div class="right">
          <span class="el-icon-back" v-if="listGain.subjectID" @click="$router.push('/subjects/list')"> 返回学科 </span>
          <el-button type="primary" icon="el-icon-edit" @click="dialogVisible = true;title='新增目录'">新增目录</el-button>
        </div>
      </el-col>
    </el-row>
     <el-alert
    :title="`数据一共${total}条`"
    type="info"
    show-icon>
  </el-alert>
  <!-- 表格数据 -->
   <el-table
      :data="tableData"
      :header-cell-style="{ background: '#fafafa' , borderBottom: '2px solid #e8e8e8'}"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="90">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="250">
        <template #default="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template #default="{ row }" >
          <span>{{ row.state === 1 ? '已启用' : '已禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="changeFlag1(row)">
                <span v-if="row.state === 1">禁用</span>
                <span v-else>启用</span>
              </el-button>
            <el-button type="text" size="small" :disabled = 'row.state === 1' @click="revise( row )">修改</el-button>
            <el-button type="text" size="small" :disabled = 'row.state === 1' @click="delDire( row )">删除</el-button>
            </template>
      </el-table-column>
    </el-table>
     <el-pagination
     v-if="listGain.pagesize < 50"
     background
     style="float:right;margin-top: 25px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="listGain.pagesize"
      :page-sizes="sizes"
      layout="prev, pager, next, sizes, jumper"
      :total="total" />
      <!-- 添加 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="20%"
  :before-close="close1">
   <el-form label-width="80px" :model="addForm" :rules="rules" ref="subjectForm">
    <el-form-item label="新增学科 " prop="subjectID">
      <el-select  placeholder="请选择" v-model="addForm.subjectID">
        <el-option  v-for="item in subjectList" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目录名称 " prop="directoryName">
      <el-input v-model.trim="addForm.directoryName" placeholder="请输入目录名称"></el-input>
    </el-form-item>
   </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="close2">取 消</el-button>
    <el-button type="primary" @click="sureAdd">确 定</el-button>
  </span>
</el-dialog>
     </el-main>
</el-container>
</template>

<script>
import { list, changeState, remove, add, detail, update } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      title: '',
      tableData: [],
      listGain: {
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null,
        subjectID: null
      },
      total: null,
      sizes: [5, 10, 20, 50],
      ab: 1,
      dialogVisible: false,
      subjectList: [],
      // tianjia
      addForm: {
        directoryName: '',
        id: null,
        subjectID: null
      },
      row: {},
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'change' }],
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      subjectName: ''
    }
  },
  created () {
    // 可以判断路由参数是否为空对象
    if (Object.keys(this.$route.query).length === 0) {
      console.log('路由参数为空对象')
    } else {
      console.log(this.$route.query)
      const { subjectID, subjectName } = this.$route.query
      // this.subjectID = subjectID
      this.listGain.subjectID = subjectID
      this.subjectName = subjectName
      console.log(123)
    }
    this.http()
    this.subjectsArr()
  },
  beforeRouteUpdate (to, form, next) {
    // }
    next()
    this.listGain.subjectID = null
    this.subjectName = ''
    this.http()
  },
  methods: {
    // 封装简单列表获取
    async subjectsArr () {
      const { data: res } = await simple()
      this.subjectList = res
    },
    // 封装目录列表渲染
    async http (obj1 = { page: 1, pagesize: 10 }) {
      obj1 = this.listGain
      const { data: { counts, items } } = await list(obj1)
      this.tableData = items
      this.total = counts
    },
    clear () {
      this.listGain = {
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null
      }
    },
    handleCurrentChange (current) {
      this.listGain.page = current
      this.http()
    },
    handleSizeChange (size) {
      this.listGain.pagesize = size
      this.http()
    },
    search () {
      if (this.listGain.directoryName === null && this.listGain.state === null) {
        return 1
      } else {
        this.listGain.page = 1
        this.http()
      }
    },
    // 禁用状态
    async changeFlag1 ({ id, state }) {
      try {
        await changeState({
          id,
          state: state === 1 ? 0 : 1
        })
        this.http()
        this.$message.success('操作成功')
      } catch (err) {
        this.$message.error('操作失败')
      }
    },
    // 删除
    async delDire (row) {
      try {
        await this.$confirm('此操作将永久删除该目录, 是否继续?', '请确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.http()
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    close1 (done) {
      done()
      this.title === '新增目录' ? this.$message('取消新增') : this.$message('取消修改')
      this.$refs.subjectForm.resetFields()
      this.addForm = {}
      this.dialogVisible = false
    },
    close2 () {
      this.title === '新增目录' ? this.$message('取消新增') : this.$message('取消修改')
      this.$refs.subjectForm.resetFields()
      this.addForm = {}
      this.dialogVisible = false
    },
    // 添加或修改
    async sureAdd () {
      try {
        await this.$refs.subjectForm.validate()
        if (this.title === '新增目录') {
          await add(this.addForm)
          this.$message.success('添加成功')
        } else {
          await update(this.row)
          this.$message.success('修改成功')
        }
        this.$refs.subjectForm.resetFields() // 重置
        this.addForm = {}
        this.http()
        this.dialogVisible = false
      } catch (err) {
        this.$message.error('参数错误 ! ! !')
      }
    },
    // 修改目录
    async revise (row) {
      this.title = '修改目录'
      const { data } = await detail(row)
      this.addForm = data
      this.row = data
      // console.table(this.addForm)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
.el-main {
  background-color: #fff;
  margin: 13px;
  position: relative;

  .topTip {
    width: 100%;
    height: 57px;
  }

  .left {
    display: flex;
    align-items: center;

    span:first-child {
      width: 80px;
    }

    .el-input:nth-child(2){
      width: 250px;
      margin-right: 100px;
    }

    span:nth-child(3) {
      width: 50px;
    }

    .selectTop {
      width: 250px;
      margin-right: 10px;
    }

    .el-button {
      width: 56px;
      padding-right: 50px;
    }

  }

  .right {
    position: relative;
    span {
      position: absolute;
      right: 121px;
      top: 10px;
      color: #409eff;
      cursor: pointer;
    }

    .el-button {
      background-color: #67c23a;
      width: 110px;
      border: 0;
      float: right;
    }
  }

}
.el-row {
  margin-bottom: 18px;
}
.el-alert {
  margin-bottom: 18px;
}
.el-form .el-select {
  width: 100%;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
 hr{
  border: none;
  width: 100%;
  height: 1px;
  background-color:#ebeef5;
  position: absolute;
  left: 0;
  top: 45px;
}
</style>
